<template>
  <div class="not-found">
    <div class="not-found-container">
      <!-- 404 图标和数字 -->
      <div class="error-visual">
        <div class="error-number">
          <span class="digit">4</span>
          <span class="digit zero">0</span>
          <span class="digit">4</span>
        </div>
        
        <div class="error-icon">
          <el-icon size="120" color="#E6A23C">
            <WarningFilled />
          </el-icon>
        </div>
      </div>
      
      <!-- 错误信息 -->
      <div class="error-content">
        <h1 class="error-title">页面未找到</h1>
        <p class="error-description">
          抱歉，您访问的页面不存在或已被移除。
          <br>
          请检查URL是否正确，或返回首页继续浏览。
        </p>
        
        <!-- 可能的原因 -->
        <div class="error-reasons">
          <h3>可能的原因：</h3>
          <ul>
            <li>页面链接已过期或被删除</li>
            <li>URL地址输入错误</li>
            <li>您没有访问该页面的权限</li>
            <li>服务器临时维护中</li>
          </ul>
        </div>
        
        <!-- 操作按钮 -->
        <div class="error-actions">
          <el-button type="primary" size="large" @click="goHome">
            <el-icon><HomeFilled /></el-icon>
            返回首页
          </el-button>
          
          <el-button size="large" @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            返回上页
          </el-button>
          
          <el-button type="success" size="large" @click="refresh">
            <el-icon><Refresh /></el-icon>
            刷新页面
          </el-button>
        </div>
        
        <!-- 快速导航 -->
        <div class="quick-nav">
          <h3>快速导航：</h3>
          <div class="nav-links">
            <el-link
              v-for="link in quickLinks"
              :key="link.path"
              :href="link.path"
              :underline="false"
              class="nav-link"
            >
              <el-icon>{{ link.icon }}</el-icon>
              {{ link.name }}
            </el-link>
          </div>
        </div>
      </div>
      
      <!-- 装饰元素 -->
      <div class="decoration">
        <div class="floating-shape shape-1"></div>
        <div class="floating-shape shape-2"></div>
        <div class="floating-shape shape-3"></div>
        <div class="floating-shape shape-4"></div>
      </div>
    </div>
    
    <!-- 页脚信息 -->
    <div class="error-footer">
      <p>
        如果问题持续存在，请联系系统管理员
        <el-link type="primary" href="mailto:admin@example.com">
          admin@example.com
        </el-link>
      </p>
      <p class="footer-time">
        错误时间：{{ currentTime }}
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user.store'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const currentTime = ref('')

// 快速导航链接
const quickLinks = computed(() => {
  const links = [
    {
      name: '仪表盘',
      path: '/dashboard',
      icon: 'Monitor'
    },
    {
      name: '患者管理',
      path: '/patients',
      icon: 'UserFilled'
    },
    {
      name: '预约管理',
      path: '/appointments',
      icon: 'Calendar'
    },
    {
      name: '体检管理',
      path: '/checkups',
      icon: 'Monitor'
    }
  ]
  
  // 如果是管理员，添加用户管理链接
  if (userStore.isAdmin) {
    links.push({
      name: '用户管理',
      path: '/users',
      icon: 'User'
    })
  }
  
  return links
})

// 方法
const goHome = () => {
  router.push('/dashboard')
}

const goBack = () => {
  if (window.history.length > 1) {
    router.go(-1)
  } else {
    goHome()
  }
}

const refresh = () => {
  window.location.reload()
}

const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 生命周期
onMounted(() => {
  updateTime()
  // 每秒更新时间
  setInterval(updateTime, 1000)
})
</script>

<style scoped>
.not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.not-found-container {
  max-width: 800px;
  width: 90%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 2;
}

.error-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.error-number {
  display: flex;
  gap: 20px;
  margin-right: 40px;
}

.digit {
  font-size: 120px;
  font-weight: 900;
  color: #409EFF;
  text-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
  animation: bounce 2s infinite;
}

.digit.zero {
  color: #E6A23C;
  animation-delay: 0.2s;
}

.digit:last-child {
  animation-delay: 0.4s;
}

.error-icon {
  animation: pulse 2s infinite;
}

.error-content {
  text-align: center;
}

.error-title {
  font-size: 32px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 16px 0;
}

.error-description {
  font-size: 16px;
  color: #7f8c8d;
  line-height: 1.6;
  margin: 0 0 30px 0;
}

.error-reasons {
  text-align: left;
  max-width: 500px;
  margin: 0 auto 30px auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #409EFF;
}

.error-reasons h3 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 16px;
}

.error-reasons ul {
  margin: 0;
  padding-left: 20px;
}

.error-reasons li {
  color: #606266;
  margin-bottom: 8px;
  line-height: 1.5;
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.quick-nav {
  text-align: center;
}

.quick-nav h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f0f9ff;
  border-radius: 20px;
  transition: all 0.3s;
  text-decoration: none;
  color: #409EFF;
  font-size: 14px;
}

.nav-link:hover {
  background: #409EFF;
  color: white;
  transform: translateY(-2px);
}

.decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 80px;
  height: 80px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.shape-2 {
  width: 60px;
  height: 60px;
  top: 20%;
  right: 15%;
  animation-delay: 1s;
}

.shape-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-delay: 2s;
}

.shape-4 {
  width: 40px;
  height: 40px;
  bottom: 30%;
  right: 10%;
  animation-delay: 3s;
}

.error-footer {
  margin-top: 40px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.error-footer p {
  margin: 8px 0;
}

.footer-time {
  font-size: 12px;
  opacity: 0.7;
}

/* 动画 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
  }
  66% {
    transform: translateY(10px) rotate(240deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .not-found-container {
    padding: 30px 20px;
  }
  
  .error-visual {
    flex-direction: column;
    gap: 20px;
  }
  
  .error-number {
    margin-right: 0;
  }
  
  .digit {
    font-size: 80px;
  }
  
  .error-icon :deep(.el-icon) {
    font-size: 80px !important;
  }
  
  .error-title {
    font-size: 24px;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .error-actions .el-button {
    width: 200px;
  }
  
  .nav-links {
    flex-direction: column;
    align-items: center;
  }
  
  .nav-link {
    width: 150px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .not-found-container {
    padding: 20px 15px;
  }
  
  .digit {
    font-size: 60px;
  }
  
  .error-icon :deep(.el-icon) {
    font-size: 60px !important;
  }
  
  .error-title {
    font-size: 20px;
  }
  
  .error-description {
    font-size: 14px;
  }
  
  .error-reasons {
    padding: 15px;
  }
  
  .error-actions .el-button {
    width: 100%;
  }
}
</style>